<template>
  <div class="MyBackpack_model">
      <div class="steam" v-if="steam">
        <div class="title">steam交易设置</div>
        <div class="link_box">
          <div class="input-box"><input type="" v-model="steamtext"  id="steam" value="" placeholder="请输入您的steam交易链接" /></div>
          <div class="btn" @click="Change_steam()">保存</div>
        </div>
        <div class="tips">小提示：开箱前请验证您的交易邀请网址工作正常，库存<span>“公开”</span></div>
        <div class="close" @click="close()"></div>
      </div>
      <div class="model_cent">
          <ul class="tal_model">
            <!-- <li @click="get_tal(1)" :class="{'activ1':index==1}"><span>背包</span></li>
            <li @click="get_tal(2)" :class="{'activ2':index==2}"><span>取回记录</span></li> -->
            <li @click="get_tal(1)" :class="{'activ1':index==1}">背包</li>
            <li @click="get_tal(2)" :class="{'activ2':index==2}">取回记录</li>
            <p></p>
          </ul>
          <div class="Backpack_cent">
            <div v-if="index==1" class="Backpack">
              <div class="left">
                <div class="hedar">
                  <div style="width: 120px;text-align: left;">件数：<span>{{total}}</span></div>
                  <div style="position: relative;">
                    <div class="Single_choice" @click="open_sort()">
                     <p>{{sort}}</p>
                     <div :class="{'an-activ':sortlist==1}">></div>
                    </div>
                    <div class="Select_all" @click="Select_all()"><div><p v-if="all"></p></div>全选</div>
                    <transition name="fade">
                      <ul class="list_ul" v-if="sortlist==1">
                        <li @click="Select_sort(0,'按获得时间排序')">按获得时间排序</li>
                        <li @click="Select_sort(1,'价格从高到低排序')">价格从高到低排序</li>
                        <li @click="Select_sort(2,'价格从低到高排序')">价格从低到高排序</li>
                      </ul>
                    </transition>
                  </div>
                </div>
                <div class="model-list-box">
                  <ul>
                    <li :class="{'activ':item.listac == 1}" @click="get_Select(index,item.id)" v-for="(item,index) in list" :key='index'>
                      <div><img :src="item.skinDetailImage" ></div>
                      <div>{{item.skinDetailName}}</div>
                      <div>
                        <div @click.stop="get_recovery(item.id,item.price)">回收<img src="../../assets/money-icon.png" ><span>{{item.price}}</span></div>
                        <div>取回</div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div v-if="total>0">
                  <v-pagination :total="total" :display="display" :current-page='currentPage' @pagechange="pagechange"></v-pagination>
                </div>
              </div>
              <div class="right">
                <div class="hedar">已经选择</div>
                <div class="yjxz_model">
                  <ul>
                    <li v-for="(item,index) in choicelist" @click="get_delete(item.id,index)" :key="index">
                      <div><img :src="item.skinDetailImage" ></div>
                      <div>{{item.skinDetailName}}</div>
                      <div>回收<img src="../../assets/money-icon.png" ><span>{{item.details.recoveryPrice}}</span></div>
                    </li>
                  </ul>
                </div>
                <div class="right-text">
                  <p>已选件数：{{choicelist.length}}</p>
                  <p>已选合计：<span>{{totalSumAll}}</span></p>
                  <div class="get_back">
                    <div @click="get_Opens()">一键取回</div>
                    <div @click="get_recoverys()">一键回收</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="record">
                <div>
                  <div class="record-title"><p>取回发起时间</p><p>订单号</p><p>详细</p></div>
                  <ul>
                    <li><p>xxxxxxxxxxx</p><p>xxxxxxxxxxx</p><p>xxxxxxxxxxxxx</p></li>
                  </ul>
                </div>
            </div>
            <p  v-if="index==1" class="tips2">多次拒绝收货将无法取回！</p>
          </div>
      </div>
  </div>
</template>

<script>
 import pagination from '../../components/pagination.vue'
export default {
  components:{
    'v-pagination': pagination,
  },
 data () {
    return {
      total: null,     // 记录总条数
      display: 12,   // 每页显示条数
      currentPage: 1,   // 当前的页数
      steam:true,
      index:1,
      all:false,
      sort:'按获得时间排序',
      sortlist:0,
      steamtext:'',
      list:[],
      pageNum:1,
      sorts:0,
      choicelist:[],
      listac:null,
    }
  },
  methods: {
    pagechange:function(currentPage){
      this.pageNum = currentPage
      this.get_mybackpack();
    },
    close(){
      this.steam=false
    },
    get_tal(e){
      this.index = e;
      this.pageNum = 1;
      this.get_mybackpack();
    },
    Select_all(){
      this.all?this.all=false:this.all=true;
      if (this.all) {
        for(let i = 0; i<this.list.length;i++){
          let id = this.list[i].id
          var k = this.choicelist.some((item,i)=>item.id==id)
          this.$set(this.list[i],'listac',1);
          if(!k){
            this.choicelist.push(this.list[i])
          }
        };
      } else{
        for(let i = 0; i<this.list.length;i++){
          this.$set(this.list[i],'listac',0);
          var id = this.list[i].id
          this.choicelist.some((item,j)=>{
              if(item.id==id){
              this.$set(this.list[i],'listac',0);
              this.choicelist.splice(j,1)
              return true;
              }
          })
        };

      }

    },
    open_sort(){
      this.sortlist==0?this.sortlist=1:this.sortlist=0;
    },
    Select_sort(e,k){
      this.sort = k
      this.sortlist = 0;
      this.sorts = e;
      this.total = 0;
      this.pageNum = 1;
      this.get_mybackpack();
    },
    get_Select(index,id){
      var k = this.list[index];
      var l_id = this.list[index].id;
      const c = this.choicelist.some(item => item.id==l_id)
        if (c) {
           this.choicelist.some((item,i)=>{
               if(item.id==l_id){
               this.$set(this.list[index],'listac',0);
               this.choicelist.splice(i,1);
               return true;
               }
           })
        } else{
          this.choicelist.push(k);
          this.$set(this.list[index],'listac',1);
        };
        var ks = 0
        for(let i = 0;i<this.choicelist.length;i++){
           let id = this.choicelist[i].id;
           this.list.some((item,i)=>{
               if(item.id==id){
                 ks++
               return true;
               }
           })
        }
        if(ks==12){
          this.all=true;
        }else{
          this.all=false
        }
    },
    get_delete(id,index){
       this.choicelist.splice(index,1)
       const c = this.list.some((item,i) => {
         if(item.id==id){
          this.$set(this.list[i],'listac',0);
         return true;
         }
       })
    },
    get_recovery(e,s){
      var id = [];
      id.push(e);
      this.$api.post('/api/user/recovery',{
         ids:id,
      }, r => {
          if(r.code==200){
            this.get_mybackpack()
            this.$confirm({
                time:'1',
                msg:'回收成功！',
            });
            var k = this.$store.state.user.money;
            var i = parseFloat((k + parseFloat(s)).toFixed(2));
            this.$store.commit('signin_money',i)
          }
        })
    },
    get_Opens(){
        for(let i = 0; i<this.list.length;i++){
          this.$set(this.list[i],'listac',0);
          var id = this.list[i].id
          this.choicelist.some((item,j)=>{
              if(item.id==id){
              this.$set(this.list[i],'listac',0);
              this.choicelist.splice(j,1)
              return true;
              }
          })
        };
    },
    get_recoverys(){
      var id = [];
      for(let i = 0;i<this.choicelist.length;i++){
         id.push( this.choicelist[i].id);
      };
      this.$api.post('/api/user/recovery',{
         ids:id,
      }, r => {
          if(r.code==200){
            this.get_mybackpack()
            this.$confirm({
                time:'1',
                msg:'回收成功！',
            });
            var k = this.$store.state.user.money;
            var i = parseFloat((k + parseFloat(this.totalSumAll)).toFixed(2));
            this.$store.commit('signin_money',i);
            this.choicelist=[];
          }
        })
    },
    Change_steam(){
      var steam = this.steamtext;
      if (steam=='') {
        this.$confirm({
            time:'1',
            msg:'请输入steam码！',
        })
      } else{
        this.$api.post('/api/user/update/userInfo',{
          steamStorehouseLink:steam,
        }, r => {
            if(r.code==200){
              this.$confirm({
                  time:'1',
                  msg:'修改成功！',
              })
            }
          })
      }
    },
    get_mybackpack(){
      this.$api.get('/api/user/mybackpack',{
        sort:this.sorts,
        pageNum:this.pageNum,
        pageSize:12
      }, r => {
          if(r.code==200){
            this.list = r.data.content;
            this.total = r.data.totalElements;
            var ks = 0
            for(let i = 0;i<this.choicelist.length;i++){
               let id = this.choicelist[i].id;
               this.list.some((item,i)=>{
                   if(item.id==id){
                     ks++
                   this.$set(this.list[i],'listac',1);
                   return true;
                   }
               })
            }
            if(ks==12){
              this.all=true;
            }else{
              this.all=false
            }
          }
        })
    }
  },
  mounted() {

  },
  computed:{
    totalSumAll(){
      let totalSumAll = 0;
      var k = 0;
        this.choicelist.map((item) => {
            if(!isNaN(item.details.recoveryPrice)){
               k += item.details.recoveryPrice;
               totalSumAll = parseFloat(k).toFixed(2)
            }
        })
        if(isNaN(totalSumAll)){
          return 0
        }
        return totalSumAll
    },
  },
  created() {
    var that = this
    setTimeout(function(){
      that.steamtext = that.$store.state.user.steamStorehouseLink;
    },100)
    that.get_mybackpack();
  }
}
</script>

<style scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s;
      max-height: 150px;
  }
  .fade-enter,
  .fade-leave-active {
     opacity: 0;
      max-height: 0px;
  }
  .record ul li{
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #333;
    color: #999999;
    display: flex;
  }
  .record ul li>p:first-child{
    width: 20%;
  }
  .record ul li>p:nth-child(2){
    width: 40%;
  }
  .record ul li>p:nth-child(3){
    width: 40%;
    text-align: left;
  }
  .record ul{
    width: 100%;
  }
  .record-title{
    display: flex;
    height: 60px;
    line-height: 60px;
    color: #999999;
    border-bottom: 1px solid #333;
  }
  .record-title>p:first-child{
    width: 20%;
  }
  .record-title>p:nth-child(2){
    width: 40%;
  }
  .record-title>p:nth-child(3){
    width: 40%;
    text-align: left;
    padding-left: 30px;
    box-sizing: border-box;
  }
  .record>div{
    width: 100%;
    min-height:700px ;
    border: 1px solid #333333;
  }
  .tips2{
    padding-right: 200px;
    box-sizing: border-box;
    font-size: 14px;
    color: #FFA22A;
    margin-top: 15px;
  }
  .get_back{
    display: flex;
    margin-top: 20px;
  }
  .get_back>div{
    margin-right: 10px;
    width: 92px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
    background-color: #1D71AD;
    cursor: pointer;
    font-size:10px;
  }
  .right-text>p{
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
  .right-text>p span{
    color: #FFA22A;
  }
  .right-text{
    margin-top: 10px;
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
    text-align: left;
  }
  .yjxz_model{
    width: 100%;
    height: 620px;
    overflow-y: scroll;
  }
  .yjxz_model::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .yjxz_model ul{
    margin:  9px auto;
    width: 176px;
  }
  .yjxz_model ul li{
    width: 176px;
    height: 118px;
    background-color: #192A34;
    padding: 5px 0 0;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .yjxz_model ul li>div:first-child{
    width: 164px;
    height: 68px;
    background-color: #143650;
    margin: 0px auto;
    position: relative;
  }
  .yjxz_model ul li>div:first-child img{
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 120px;
    max-height: 60px;
    width: auto;
    height: auto;
    transform: translate(-50% , -50%);
  }
  .yjxz_model ul li>div:nth-child(2){
    margin: 6px auto;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #FFFFFF;
  }
  .yjxz_model ul li>div:nth-child(3){
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #FFFFFF;
  }
  .yjxz_model ul li>div:nth-child(3) img{
    width: 13px;
    height: 13px;
    margin: 0 5px;
  }
  .yjxz_model ul li>div:nth-child(3) span{
    color: #FFA32A;
    padding-top: 2px;
  }
  .model-list-box{
    width: 100%;
    padding:11px 13px;
    height: 752px;
    box-sizing: border-box;
  }
  .model-list-box ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .model-list-box ul li{
    width: 173px;
    height: 228px;
    background-color: #192A34;
    margin-right: 9px;
    margin-bottom: 15px;
    cursor: pointer;
    border: 1px solid #192A34;
  }
  .model-list-box ul .activ{
    position: relative;
    border: 1px solid #09C6DC;
  }
  .model-list-box ul .activ::after{
    position: absolute;
    top: 0px;
    right: 0px;
    content: "";
    background-image: url(../../assets/maback_gou-icon.png);
    background-size: 100% 100%;
    width: 34px;
    height: 34px;
  }
  .model-list-box ul li:nth-child(4n){
    margin-right: 0px;
  }
  .model-list-box ul li>div:first-child{
    width: 153px;
    height: 153px;
    background-color: #143650;
    margin: 10px auto;
    position: relative;
  }
  .model-list-box ul li>div:first-child img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 140px;
    max-height: 140px;
    transform: translate(-50% , -50%);
  }
  .model-list-box ul li>div:nth-child(2){
    margin: 8px auto;
    width: 150px;
    font-size: 10px;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .model-list-box ul li>div:nth-child(3){
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 160px;
    margin:  0 auto;
  }
  .model-list-box ul li>div:nth-child(3)>div:first-child{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #FFFFFF;
    width: 105px;
    height: 28px;
    background-color: #026FA0;
    line-height: 12px;
    cursor: pointer;
  }
  .model-list-box ul li>div:nth-child(3)>div:first-child img{
    width: 13px;
    height: 13px;
    margin: 0 5px;
  }
  .model-list-box ul li>div:nth-child(3)>div:first-child span{
    color: #FFA32A;
    padding-top: 2px;
  }
  .model-list-box ul li>div:nth-child(3)>div:last-child{
    width: 48px;
    height: 28px;
    line-height: 28px;
    color: #FFFFFF;
    font-size: 12px;
    cursor: pointer;
    background-color: #1A4464;
  }
  .list_ul{
    position: absolute;
    left: 0;
    top: 50px;
    background-color: #000000;
    color: #FFFFFF;
    overflow: hidden;
    z-index: 9;
  }
  .list_ul li{
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    text-align: left;
    cursor: pointer;
  }
  .list_ul li:hover{
    background-color: #85B8FA;
  }
  .Single_choice>div{
    transform: rotate(90deg);
    font-size: 18px;
    transition: all .3s;
  }
  .Single_choice .an-activ{
    transform: rotate(270deg) !important;
    transition:all .3s;
  }
  .Single_choice>p{
    padding-left: 15px;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
  .Single_choice{
    width: 160px;
    height: 34px;
    border: 1px solid #333333;
    margin-right: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    padding-right: 5px;
    box-sizing: border-box;
  }
  .Select_all{
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .Select_all>div{
    width: 16px;
    height: 16px;
    border: 1px solid #333333;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .Select_all>div p{
    width: 10px;
    height: 10px;
    background-color: #FFA22A;
  }
  .Backpack_cent .Backpack .left .hedar>div:nth-child(2){
    margin-left: 280px;
    display: flex;
    align-items: center;
  }
  .Backpack_cent .Backpack .left .hedar span{
    color: #FFFFFF;
    font-size: 18px;
  }
  .Backpack_cent .Backpack .left .hedar,.Backpack_cent .Backpack .right .hedar{
    display: flex;
    border-bottom: 1px solid #333333;
    height: 60px;
    color: #999999;
    line-height: 60px;
    font-size: 14px;
    justify-content: center;
  }
  .Backpack_cent .Backpack .left{
    border: 1px solid #333333;
    width: 755px;
    min-height: 845px;
    padding-bottom: 20px;
  }
  .Backpack_cent .Backpack .right{
     border: 1px solid #333333;
     width: 200px;
  }
  .Backpack_cent .Backpack{
    display: flex;
    justify-content: space-between;
  }
  .Backpack_cent{

  }
  .model_cent .tal_model{
    display: flex;
    font-size: 18px;
    color: #999999;
    width: 413px;
    background-color: #222833;
    overflow: hidden;
    position: relative;
  }
  .model_cent .tal_model>p{
    position: absolute;
    top: -10px;
    left: 207px;
    width: 10px;
    bottom: -10px;
    background-color: #0f141c;
    transform: rotate(31deg);
  }
  .model_cent .tal_model::before{
    position: absolute;
    top: -20px;
    right: -15px;
    bottom: -20px;
    content: "";
    width: 30px;
    background-color: #0f141c;
    transform: rotate(31deg);
    z-index: 1;
  }
  .model_cent .tal_model li{
    height: 49px;
    line-height: 49px;
    background-size: 100% 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .5s;
  }
  .model_cent .tal_model li:first-child{
    width: 220px;
    height: 49px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    background-position: -220px 0;
    z-index: 2;
    background-image: url(../../assets/bk-tal1-bgs.png);
    transition: all .5s;
  }
  .model_cent .tal_model li:nth-child(2){
    width: 221px;
    margin-left: -29px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    background-position: -221px 0;
    background-image: url(../../assets/bk-tal2-bgs.png);
    transition: all .5s;
  }
  .model_cent .tal_model .activ1{
     background-image: url(../../assets/bk-tal2-bgs.png);
     background-size: 100% 100%;
     height: 49px;
     color: #333333;
     background-position: 0px 0 !important;
  }
  .model_cent .tal_model .activ2{
    background-image: url(../../assets/bk-tal1-bgs.png) ;
    width: 220px;
    height: 49px;
    background-size: 100% 100%;
    color: #333333;
    background-position: 0px 0 !important;
  }
  .model_cent .tal_model .activ1::after{
    display: none;
  }
  .model_cent .tal_model .activ2::after{
    display: none;
  }
  .model_cent .tal_model li:hover{
    color: #333333;
    background-image: url(../../assets/bk-tal2-bgs.png);
    background-size: 100% 100%;
    transition: all .5s;
    background-position: 0px 0;
  }
  .model_cent .tal_model li:first-child:hover{
    color: #333333;
    background-image: url(../../assets/bk-tal1-bgs.png);
    background-size: 100% 100%;
    transition: all .5s;
    background-position: 0px 0;
  }
  .model_cent .tal_model li:hover::after{
    display: none;
  }
  .model_cent .tal_model li::after{
    position: absolute;
    top: -20px;
    right: 19px;
    bottom: -20px;
    content: "";
    width: 40px;
    background-color: #222833;
    transform: rotate(31deg);
  }
  .model_cent .tal_model li:not(:first-child)::before{
    position: absolute;
    top: -20px;
    left: -19px;
    bottom: -20px;
    content: "";
    width: 40px;
    background-color: #222833;
    transform: rotate(31deg);
  }
  .model_cent{
    margin-top: 26px;
    margin-right: -10px;
  }
  .MyBackpack_model{
    padding: 50px 22px;
  }
  .MyBackpack_model .steam{
    padding: 32px 70px;
    border: 1px solid #333333;
    height: 208px;
    position: relative;
  }
  .MyBackpack_model .steam .title{
    color: #FFFFFF;
    text-align: left;
    font-size: 22px;
  }
  .link_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
  }
  .input-box{
    width: 640px;
    height: 53px;
    line-height: 53px;
  }
  .input-box input{
    width: 100%;
    height: 100%;
    background-color: rgba(40, 43, 52, 1);
    border:none;
    outline: none;
    padding-left: 15px;
    box-sizing: border-box;
    font-size: 18px;
    color: #666666;
  }
  .input-box input::placeholder{
    color: #bbbbbb;
  }
  .link_box .btn{
    width: 170px;
    height: 53px;
    background: #FFA22A;
    line-height: 53px;
    cursor: pointer;
    font-size: 18px;
  }
  .tips{
    padding-left: 30px;
    color: #999999;
    font-size: 16px;
    margin-top: 20px;
    text-align: left;
  }
  .tips span{
    color: #039CC9;
    margin-left: 5px;
  }
  .MyBackpack_model .steam .close{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../../assets/close-icon1.png);
    background-size: 100% 100%;
  }

</style>
